import 'package:flutter/material.dart';
import 'package:wechat_clone/modal/contacts.dart'
    show Contact, ContactsPageData;
import 'package:wechat_clone/constants.dart' show AppColors, Constants;

class _ContactItem extends StatelessWidget {
  _ContactItem(
      {@required this.avatar,
      @required this.title,
      this.groupTitle,
      this.onPressed});

  final String avatar;
  final String title;
  final String groupTitle;
  final VoidCallback onPressed; //点击事件回调函数

  bool get _isAvatarFromNet {
    return avatar.startsWith("http") ? true : false;
  }

  @override
  Widget build(BuildContext context) {
    Widget _avatarICon = _isAvatarFromNet
        ? Image.network(avatar,
            width: Constants.ContactAvatarSize,
            height: Constants.ContactAvatarSize)
        : Image.asset(avatar,
            width: Constants.ContactAvatarSize,
            height: Constants.ContactAvatarSize);

    //分组标签
    List<Widget> itemBody = [];
    if (this.groupTitle != null) {
      Widget rowWidget = Expanded(
        flex: 1,
        child: Container(
          padding: const EdgeInsets.fromLTRB(16.0, 2.0, 16.0, 2.0),
          child: Text(groupTitle),
          color: Color(0xfff0f0f0),
        ),
      );
      itemBody = [rowWidget];
    }
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            children: itemBody,
          ),
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 16.0),
            padding: const EdgeInsets.symmetric(vertical: 10.0),
            decoration: BoxDecoration(
                // color: Colors.red,
                border: Border(
                    bottom: BorderSide(
                        width: Constants.DividerWidth,
                        color: Color(AppColors.DividerColor)
                        ))),
            child: Row(
              children: <Widget>[
                _avatarICon,
                SizedBox(width: 10.0),
                Text(title)
              ],
            ),
          )
        ],
      ),
    );
  }
}

class ContactsPage extends StatefulWidget {
  @override
  _ContactsPageState createState() => _ContactsPageState();
}

class _ContactsPageState extends State<ContactsPage> {
  final ContactsPageData data = ContactsPageData.mock();
  final List<Contact> _contacts = [];
  final List<_ContactItem> _topFuncationItems = [
    _ContactItem(
      avatar: 'assets/images/ic_new_friend.png',
      title: "新的朋友",
      onPressed: () {
        print("新的朋友");
      },
    ),
    _ContactItem(
      avatar: 'assets/images/ic_group_chat.png',
      title: "群聊",
      onPressed: () {},
    ),
    _ContactItem(
      avatar: 'assets/images/ic_tag.png',
      title: "标签",
      onPressed: () {},
    ),
    _ContactItem(
      avatar: 'assets/images/ic_public_account.png',
      title: "公众号",
      onPressed: () {},
    )
  ];
  @override
  void initState() {
    super.initState();
    _contacts
      ..addAll(data.contacts)
      ..addAll(data.contacts);

      _contacts.sort((Contact a, Contact b) => a.nameIndex.compareTo(b.nameIndex));
  }

  String lastIndexName = "";
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        if (index < _topFuncationItems.length) {
          return _topFuncationItems[index];
        } else {
          Contact _contact = _contacts[index - _topFuncationItems.length];
          if(lastIndexName != _contact.nameIndex){
            lastIndexName = _contact.nameIndex;
            return _ContactItem(avatar: _contact.avatar, title: _contact.name,groupTitle: _contact.nameIndex,);
          }else{
            return _ContactItem(avatar: _contact.avatar, title: _contact.name);
          }
        }
      },
      itemCount: _contacts.length + _topFuncationItems.length,
    );
  }
}
